<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="center-pic">
     <img src="../assets/img/perconCenger.png" alt="" >
    </div>
   
    <div class="member-center clearfix">
      <div class="left-nav fl">
        <ul>
          <!-- 进行切换子页面，写法同vue.js -->
          <li class="person-manger">
            <nuxt-link to="/memberCenter/indexCenter">
              <img src="../assets/img/personIcon.png" />
            </nuxt-link>
          </li>
          <li :class="[activeIndex == 1 ? 'acitve' : '']" @click="navTab(1)">
            <nuxt-link to="/memberCenter/helpFramRecord" class="clearfix">
              <img src="../assets/img/person01.png" class="fl" />
              <span class="fl">助农申请记录</span>
              <img src="../assets/img/arrow-right.png" class="fr arrow-right" />
            </nuxt-link>
          </li>
          <li :class="[activeIndex == 2 ? 'acitve' : '']" @click="navTab(2)">
            <nuxt-link to="/memberCenter/myOrder" class="clearfix">
              <img src="../assets/img/myOrderIcon.png" class="fl" />
              <span class="fl">我的订单</span>
              <img src="../assets/img/arrow-right.png" class="fr arrow-right" />
            </nuxt-link>
          </li>
        </ul>
      </div>

      <div class="right-main fr">
        <!-- <nuxt-child>标签在父页面组件中相当于是子页面组件的占位符；嵌套中这个不可少 -->
        <nuxt-child keep-alive :foobar="123"></nuxt-child>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../components/head";
import SearchHeader from "./indexHome/searchHeader";
import FooterPage from "../components/footer";
import navPage from "../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage
  },
  data() {
    return {
      activeIndex: 0
    };
  },
  mounted() {},
  methods: {
    navTab(index) {
      this.activeIndex = index;
    }
  }
};
</script>
<style scoped>
.member-center {
  width: 1200px;
  margin: 10px auto;
  min-height: 773px;
}
.left-nav {
  width: 278px;
  background: #fff;
  min-height: 773px;
}
.left-nav ul {
  padding-top: 20px;
}
.left-nav ul li {
  line-height: 51px;
  text-indent: 20px;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
}
.left-nav ul li a {
  display: block;
  width: 100%;
}
.left-nav ul li a img:nth-child(1) {
  width: 16px;
  height: 16px;
  margin-right: 15px;
  margin-top: 17.5px;
  margin-left: 15px;
}
.left-nav ul li a img.arrow-right {
  width: 16px;
  height: 16px;
  margin-right: 20px;
  margin-top: 17.5px;
}
.left-nav ul li a span {
  color: #5d5d5d;
  font-size: 14px;
}
.left-nav ul li:hover a {
  color: #ee781b;
}
.left-nav ul li.acitve a span {
  color: #ee781b;
}
.right-main {
  width: 922px;
  min-height: 773px;
}
.person-manger {
  height: 105px;
}
.person-manger img {
  width: 192px !important;
  height: 64px !important;
  margin-left: 15px;
  margin-top: 20px;
}
.center-pic {
  width: 1200px;
  height: 83px;
  margin:0 auto;
}
.center-pic img {
  width: 100%;
  height: 83px;
}
</style>